<template>
  <div class="nav_outer">
    <Header>银行卡</Header>
    <div class="content">
      <div class="cards">
        <div class="card flex_center" v-for="item in bankCards" v-bind:key="item.id">
          <!-- <img src="../assets/img/jiansheyinhang@2x.png" alt /> -->
          <div class="card_info">
            <h5>{{item.bankName}}</h5>
            <p>储蓄卡</p>
            <p>{{item.cardNo}}</p>
          </div>
        </div>
      </div>
      <div class="ensure_btn" @click="addbankcard">添加银行卡</div>
    </div>
  </div>
</template>

<script>
import Header from "@/components/commonComponents/Header";
export default {
  data() {
    return {
      bankCards: [],
      accountId: ""
    };
  },
  created() {
    this.loadAccount();
  },
  methods: {
    loadAccount() {
      let userId = localStorage.getItem("uid");
      this.Http2.get(`/mobile/myaccount/myAccount/${userId}`, null).then(
        res => {
          this.bankCards = res.bankCards || [];
          this.accountId = res.id;
        },
        () => {}
      );
    },
    addbankcard() {
      this.$router.push("/addbankcarddetail?accountId=" + this.accountId);
    }
  },
  components: {
    Header
  }
};
</script>

<style lang='scss' scoped>
@function px2em($px) {
  @if (unitless($px)) {
    @return px2em($px + 0px);
  } @else if (unit($px) == em) {
    @return $px;
  }
  @return ($px / 75px) * 1rem;
}
.content {
  .cards {
    .card {
      background: #fff;
      justify-content: space-around;
      margin: px2em(10) px2em(20);
      padding-top: 10px;
      border-radius: 6px;
      box-shadow: 0 0 10px #ddd;
    }
    .card_info > h5,
    .card_info > p {
      color: #333;
    }
    img {
      width: px2em(116);
    }
  }
  .ensure_btn {
    height: px2em(80);
    line-height: px2em(80);
    border-radius: px2em(40);
    text-align: center;
    background: #4f7df6;
    color: #fff;
    margin: px2em(30);
  }
}
</style>